<template>
	<view>
		<image src="../../static/index/push-buy-bg.png" style="width: 100%;height: 270rpx;" mode=""></image>
		<view style="position: absolute;top: 206rpx;left: 20rpx;right: 20rpx;padding-bottom: 60rpx;">
			<view class="form">
				<view class="title">请完善信息</view>
				<view class="form-item">
					<view class="item-left">姓名</view>
					<view class="item-right">
						<input type="text" v-model="requestData.realname" placeholder="请输入姓名"
							placeholder-class="input-css">
					</view>
				</view>
				<view class="form-item">
					<view class="item-left">手机号</view>
					<view class="item-right">
						<input type="number" v-model="requestData.mobile" placeholder="请输入手机号"
							placeholder-class="input-css">
					</view>
				</view>
				<view class="form-item">
					<view class="item-left">微信号</view>
					<view class="item-right">
						<input type="text" v-model="requestData.wechat" placeholder="请输入微信号"
							placeholder-class="input-css">
					</view>
				</view>
				<view class="form-item">
					<view class="item-left">性别</view>
					<view class="item-right flex">
						<view style="display: flex;align-items: center;" @tap="requestData.gender = 1">
							<image src="../../static/index/check-true.png" style="width: 28rpx;height: 28rpx;"
								v-if="requestData.gender === 1 ? true : false"></image>
							<image src="../../static/index/check-false.png" style="width: 28rpx;height: 28rpx;" v-else>
							</image>
							<view style="color: #464646;font-size: 28rpx;padding-left: 14rpx;">男</view>
						</view>
						<view style="display: flex;align-items: center;margin-left: 80rpx;"
							@tap="requestData.gender = 0">
							<image src="../../static/index/check-true.png" style="width: 28rpx;height: 28rpx;"
								v-if="requestData.gender === 0 ? true : false"></image>
							<image src="../../static/index/check-false.png" style="width: 28rpx;height: 28rpx;" v-else>
							</image>
							<view style="color: #464646;font-size: 28rpx;padding-left: 14rpx;">女</view>
						</view>
					</view>
				</view>
			</view>
			<view style="padding-bottom: 200rpx;">
				<view class="form1" style="margin-top: 20rpx;">
					<!-- <picker @change="cityPicker" :range="cityList" range-key="name"> -->
						<view class="form-item">
							<view class="item-left">城市</view>
							<view class="item-right" :style="city == '请选择城市' ? '' : 'color: #464646;'">
								{{city}}
								<image src="../../static/index/zu210-2x.png"
									style="width:16rpx;height: 16rpx;margin-left: 20rpx;"></image>
							</view>
							<cityP @choiceCity='choiceCity' class="compontent_c" ></cityP>
							<!-- <view >
							</view> -->
						</view>
					<!-- </picker> -->

					<view class="form-item" style="padding-right: 40rpx;">
						<view class="item-left">有无意向公寓</view>
						<view class="item-right flex">
							<view style="display: flex;align-items: center;" @tap="intention(1)">
								<image src="../../static/index/check-true.png" style="width: 28rpx;height: 28rpx;"
									v-if="requestData.is_intention === 1 ? true : false"></image>
								<image src="../../static/index/check-false.png" style="width: 28rpx;height: 28rpx;"
									v-else></image>
								<view style="color: #464646;font-size: 28rpx;padding-left: 14rpx;">有</view>
							</view>
							<view style="display: flex;align-items: center;margin-left: 80rpx;" @tap="intention(0)">
								<image src="../../static/index/check-true.png" style="width: 28rpx;height: 28rpx;"
									v-if="requestData.is_intention === 0 ? true : false"></image>
								<image src="../../static/index/check-false.png" style="width: 28rpx;height: 28rpx;"
									v-else></image>
								<view style="color: #464646;font-size: 28rpx;padding-left: 14rpx;">无</view>
							</view>
						</view>
					</view>
					<block v-if="requestData.is_intention">
						<!-- <picker @change="apartmentPicker" :range="apartmentList" range-key="title">
							<view class="form-item">
								<view class="item-left">公寓</view>
								<view class="item-right" :style="apartment == '请选择公寓' ? '' : 'color: #464646;'">
									{{apartment}}
									<image src="../../static/index/zu210-2x.png"
										style="width:16rpx;height: 16rpx;margin-left: 20rpx;"></image>
								</view>
							</view>
						</picker> -->
						<view class="form-item flex align-center" style="justify-content: space-between;" @tap="toChoiceApartment">
								<view class="item-left">意向公寓</view>
								<view class="flex align-center">
									<view style="color: #8D8D8D;font-size: 26rpx;padding-right: 16rpx;">请选择 （最多3项）</view>
									<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;">
									</image>
								</view>
							</view>
							
							<view style="padding: 0 20rpx;background: #F9F9F9;border-radius: 8px;">
								<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #EFEFEF;" v-for="(item,index) in choiceApartment" :key="index">
									<view class="flex" style="flex: 1;">
										<image :src="item.thumb"
											style="width: 166rpx;height: 106rpx;border-radius: 4px;"></image>
										<view style="padding-left: 20rpx;">
											<view class="text-one" style="color: #141414;font-size: 24rpx;font-weight: bold;line-height: 24rpx;width: 340rpx;">{{item.title}}</view>
											<view class="flex align-center" style="padding: 6rpx 0 15rpx 0;">
												<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
												<text class="text-one" style="color: #ABABAB;font-size: 20rpx;width: 340rpx;">{{item.address}}</text>
											</view>
											<view class="flex align-end">
												<text class="font-20 fw5" style="color: #C40E0E;">£</text>
												<text class="font-28 fw5"
													style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.price}}</text>
												<text class="font-20 fw4 cl-88">起 /周</text>
											</view>
										</view>
									</view>
									<image src="../../static/index/close.png" style="width: 36rpx;height: 36rpx;" @tap="delApartment(index)"></image>
								</view>
							</view>
						
						<picker @change="roomPicker" :range="roomList" range-key="title">
							<view class="form-item">
								<view class="item-left">房型</view>
								<view class="item-right" :style="room_type == '请选择房型' ? '' : 'color: #464646;'">
									{{room_type}}
									<image src="../../static/index/zu210-2x.png"
										style="width:16rpx;height: 16rpx;margin-left: 20rpx;"></image>
								</view>
							</view>
						</picker>
					</block>
					<block v-else>
						<view class="form-item">
							<view class="item-right">
								<textarea maxlength="100" type="text" v-model="requestData.require_desc" placeholder="请输入房间需求描述"
									 class="p-2" style="width: 600rpx;border:1rpx solid #ccc;height: 100rpx;border-radius:10rpx;color: #333;"></textarea>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="button">
			<view class="flex align-center justify-center py-2">
				<view class="checked" @click="this.dealShow = !this.dealShow">
					<image :src="dealShow?'/static/common/active.png':'/static/common/unchecked.png'" mode=""></image>
				</view>
				<view class="font-28 cl-44">
					<text @click="this.dealShow = !this.dealShow">阅读并同意</text>
					<text @click="jump({url:'/pages/fwxy/fwxy'})" style="color: #ffb24b;">《服务协议》</text>及
					<text @click="jump({url:'/pages/yszc/yszc'})" style="color: #ffb24b;">《隐私政策》</text>
					</view>
			</view>
			<view class="butxt" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import cityP from "@/components/city.vue"
	export default {
		components: {
			cityP
		},
		data() {
			return {
				dealShow:true,
				cityList: [],
				apartmentList: [{
					title: '请先选择城市'
				}],
				roomType: [],
				city_id: null, //城市id
				requestData: {
					realname: '',
					mobile: '',
					// city: '请选择城市',
					// apartment: '请选择公寓',
					// room_type: '请选择房型',
					gender: 1,
					is_intention: 1,
					city_id: '',
					apartment_id: '',
					room_id: '',
					require_desc:'',//需求描述
					wechat:''
				},
				city: '请选择城市',
				apartment: '请选择公寓',
				roomList:[{
					title: '请先选择公寓'
				}],
				room_type: '请选择房型',
				choiceApartment:[],//意向列表
			}
		},
		onLoad() {

			//城市
			this.$H.get(this.$api.get_city_list, {}, {
				token: false
			}).then(res => {
				this.cityList = res.data
			})
			//房型
			this.$H.get(this.$api.get_room_type, {}, {
				token: false
			}).then(res => {
				console.log(res)
				this.roomType = res.data
			})
			
			uni.$on('choiceApa', (data) => {
				this.choiceApartment = data.list
				// console.log('选择公寓的监听' + data.list);
				//房间列表
				let temparr = []
				this.choiceApartment.forEach(item=>{
					temparr.push(item.id)
				})
				this.requestData.apartment_id = temparr.join(',')
				this.$H.post(this.$api.get_room_by_apartment,{id:this.requestData.apartment_id},{token:false}).then(res=>{this.roomList = res.data})
			})
		},
		methods: {
			//城市选择
			choiceCity(e){
				console.log(e)
				//清空公寓
				this.apartment = '请选择公寓'
				this.requestData.apartment_id = ''
				//清空房间
				this.room_type = '请选择房型'
				this.requestData.room_id = ''
				
				this.city = e.name
				this.requestData.city_id = e.id
				//根据城市id获取公寓
				this.$H.post(this.$api.get_list_by_city, {
					city_id: this.requestData.city_id
				}, {
					token: false
				}).then(res => {
					this.apartmentList = res.data
				})
			},
			//删除
			delApartment(index){
				this.choiceApartment.splice(index,1)
			},
			//选择意向公寓
			toChoiceApartment(){
				if(this.requestData.city_id){
					this.jump({url:`/pages/choiceApartment/choiceApartment?cityId=${this.requestData.city_id}&apartment=${JSON.stringify(this.choiceApartment)}`})
				}else{
					return this.msg('请先选择城市')
				}
			},
			//提交
			submit() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.requestData.realname) return this.msg('请输入姓名')
				if (!this.requestData.mobile) return this.msg('请输入手机号')
				if (!reg.test(this.requestData.mobile)) return this.msg('请输入正确的手机号')
				if (!this.requestData.city_id) return this.msg('请选择城市')
				if(this.requestData.is_intention && !this.requestData.apartment_id) return this.msg('请选择公寓')
				if(this.requestData.is_intention && !this.requestData.room_id) return this.msg('请选择房型')
				
				if(this.requestData.is_intention == 0 && !this.requestData.require_desc) return this.msg('请输入房间需求描述')
				
				if(!this.dealShow) return this.msg('请阅读并同意《服务协议》及《隐私政策》')
				
				this.$H.post(this.$api.submit_push_buy, {
					...this.requestData
				}, {
					token: true
				}).then(res => {
					// this.msg('提交成功')
					uni.showModal({
						title:'友情提示',
						content:'你的申请已提交，请等待米欧客服联系您',
						showCancel:false,
						success: res =>{
							if(res.confirm){
								uni.navigateBack()
							}
						}
					})
					
				})
			},
			//意向
			intention(item) {
				this.requestData.is_intention = item
				if (item == 0) {
					this.requestData.apartment_id = ''
					this.requestData.room_id = ''
				}
			},
			//房间选择
			roomPicker(e) {
				if (!this.requestData.apartment_id) return
				this.room_type = this.roomList[e.detail.value].title
				this.requestData.room_id = this.roomList[e.detail.value].id
			},
			//公寓选择
			apartmentPicker(e) {
				if (!this.requestData.city_id) return
				//清空房间
				this.room_type = '请选择房型'
				this.requestData.room_id = ''
				this.apartment = this.apartmentList[e.detail.value].title
				this.requestData.apartment_id= this.apartmentList[e.detail.value].id
				//房间列表
				this.$H.post(this.$api.get_room_by_apartment,{id:this.requestData.apartment_id},{token:false}).then(res=>{this.roomList = res.data})
			},
			//城市选择
			cityPicker(e) {
				//清空公寓
				this.apartment = '请选择公寓'
				this.requestData.apartment_id = ''
				//清空房间
				this.room_type = '请选择房型'
				this.requestData.room_id = ''
				
				this.city = this.cityList[e.detail.value].name
				this.requestData.city_id = this.cityList[e.detail.value].id
				//根据城市id获取公寓
				this.$H.post(this.$api.get_list_by_city, {
					city_id: this.requestData.city_id
				}, {
					token: false
				}).then(res => {
					this.apartmentList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.form {
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 8px 8px 8px 8px;

		.title {
			padding: 40rpx 0 10rpx 0;
			font-size: 32rpx;
			font-weight: bold;
			color: #393939;
		}

		.form-item {
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F8F8F8;

			.input-css {
				font-size: 28rpx;
				font-weight: 400;
				color: #BCBCBC;
			}

			.item-left {
				width: 250rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #676767;
			}

			.item-right {}
		}

		&.form>.form-item:last-child {
			border: none;
		}
	}

	.form1 {
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 8px 8px 8px 8px;

		.title {
			padding: 40rpx 0 10rpx 0;
			font-size: 32rpx;
			font-weight: bold;
			color: #393939;
		}

		.form-item {
			position: relative;
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F8F8F8;

			.item-left {
				font-size: 28rpx;
				font-weight: 400;
				color: #676767;
			}

			.item-right {
				font-size: 28rpx;
				font-weight: 400;
				color: #BCBCBC;
			}
		}

		&.form>.form-item:last-child {
			border: none;
		}
		
		.compontent_c{
			opacity: 0;
			position: absolute;
			right: 0;
			left: 0;
		}
	}

	.button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx 35rpx 30rpx;
		background-color: #fff;
		.checked{
			width: 36rpx;
			height: 36rpx;
			margin-right: 24rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.butxt {
			text-align: center;
			padding: 24rpx 0;
			background: #FFB24B;
			border-radius: 34px 34px 34px 34px;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>
